import type { GetServerSideProps } from "next"; import "../../app/globals.css"; import CompactTable from "@/components/CompactTable/CompactTable"; import DataChart from "@/components/DataChart/DataChart"; import Divider from "@/components/Divider/Divider"; import Footer from "@/components/Footer/Footer"; import ChannelCard from "@/components/ChannelCard/ChannelCard" import Head from "next/head"; import TitleBar from "../../components/TitleBar/TitleBar"; interface ChannelDataProp { channel_id: string; channel_name: string; profile_pic: string; subscribers: number; sub_org: string; video_count: number; view_count: number; next_milestone: string; days_until_next_milestone: string; next_milestone_date: string; } interface GraphDataProp { labels: string[]; datasets: number[]; } interface CompactTableProps { dates: string[]; milestones: string[]; } export const getServerSideProps: GetServerSideProps = async (context) => { const { slug } = context.params || {}; const chartData = await getGraphData(slug as string); const channelData = await getChannelData(slug as string); const sevenDayGraphData = await get7DGraphData(slug as string); const milestoneData = await getMilestoneData(slug as string); return { props: { chartData, channelData, slug, sevenDayGraphData, milestoneData, }, }; }; function Page({ chartData, channelData, sevenDayGraphData, slug, milestoneData, }: { chartData: GraphDataProp; channelData: ChannelDataProp; sevenDayGraphData: GraphDataProp; slug: string; milestoneData: CompactTableProps; }) { console.log(milestoneData); return ( <> {slug as string} - PhaseTracker

For intervals which we did not record any data, the closest recorded datapoint is chosen